<!DOCTYPE html>
<html class="" lang="en">
<head>
	<title>LTMALL-注册</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">	
		<link rel="stylesheet" type="text/css" href="/css/all.min.css">				
		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.min.css">
		<link rel="shortcut icon" type="image/x-icon" href="/img/Favicon.ico">
		<link rel="stylesheet" type="text/css" href="/css/animate.min.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.css">
		<link rel="stylesheet" type="text/css" href="/css/fontawesome.min.css">
		<link rel="stylesheet" type="text/css" href="/css/style.css">
		<link rel="stylesheet" type="text/css" href="/css/media.css">
		<link rel="stylesheet" type="text/css" href="/css/responsive.css">
		<link rel="stylesheet" type="text/css" href="/css/owl.carousel.css">
  		<link rel="stylesheet" type="text/css" href="/css/owl.theme.default.css"> 


</head>
<body>

<th:block th:include="header"/>
	<div id="Registration_page" class="Registration-page animate__animated animate__fadeInUp">

		<div class="sp_header bg-white p-3">
			<div class="container custom_container">	
				<div class="row ">
					<div class="col-12 ">
						<ul>
							<li class="d-inline-block font-weight-bolder"><a href="/index">首页</a></li>
							<li class="d-inline-block hr_ font-weight-bolder"><a href="#">注册</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>

			<div class="container custom_container">
	            <h3 class="text-center">注册成为会员</h3>
	            <div id="Registration" class="page-content card card-block p-3 p-sm-4  ">
	            	<form class="needs-validation " method="post" novalidate >

	            		<p>已有账号?<a href="/login"> 点击登录</a></p>




					  <div class="form-group">
					    <label  class="font-weight-bolder">昵称</label>
					    <input type="text" class="form-control" id="username"  required>
					  </div>

					  <div class="form-group">
					    <label for="r_password" class="font-weight-bolder">密码</label>
					    <input type="password" class="form-control" id="r_password" required>
					  </div>

						<div class="form-group">
							<label for="r_password" class="font-weight-bolder">确认密码</label>
							<input type="password" class="form-control" id="confirmPassword" required>
						</div>

						<div class="form-group">
							<label for="r_password" class="font-weight-bolder">手机号</label>
							<input type="text" class="form-control" id="phone" required>
						</div>

						<div class="form-group">
							<div class="layui-input-inline" style="display: inline-flex">
								<input type="text" class="form-control" placeholder="验证码" required style="width: 100px" id="captcha">
							</div>
							<div class="layui-input-inline" style="display: inline-flex">
								<button id="getMsg" type="button" class="btn btn-primary rese float-left mt-3">获取</button>
							</div>
						</div>


					  
					  <div><button id="clearButton" type="reset" class="btn btn-primary rese float-left mt-3">重置</button><input type="button" id="registrationSubmitBtn" name="submit" class="btn btn-primary mt-3 float-right" value="提交"></div>
					  
					</form>
	            </div>
	        </div>
	 
	</div>	<!-- login_page -->


<th:block th:include="end"/>



	<script src="/js/jquery-3.4.1.min.js"></script>
	<script src="/js/owl.carousel.js"></script>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/popper.min.js"></script>
	<script src="/js/all.min.js"></script>
	<script src="/js/index.js"></script>
	<script src="/js/moment.min.js"></script>
    <script src="/js/wow.min.js"></script>

     <script>
        // Disable form submissions if there are invalid fields
        (function() {
          'use strict';
          window.addEventListener('load', function() {
            // Get the forms we want to add validation styles to
            var forms = document.getElementsByClassName('needs-validation');
            // Loop over them and prevent submission
            var validation = Array.prototype.filter.call(forms, function(form) {
              form.addEventListener('submit', function(event) {
                if (form.checkValidity() === false) {
                  event.preventDefault();
                  event.stopPropagation();
                }
                form.classList.add('was-validated');
              }, false);
            });
          }, false);
        })();
        </script>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>

	layui.use([ 'form', 'table', 'layer','laytpl' ], function() {
		var $ = layui.jquery, form = layui.form;
		var table = layui.table;
		var layer = layui.layer;
		var laytpl = layui.laytpl;

		var countdown = 60; // 倒计时初始时间为60秒
		function setTimeRun() {
			if (countdown == 0) {
				$("#getMsg").removeAttr("disabled");
				$("#getMsg").html("获取");
				countdown = 60;
			} else {
				$("#getMsg").attr("disabled", true); // 禁用按钮
				$("#getMsg").html("重新获取(" + countdown + ")");
				countdown--;
				setTimeout(setTimeRun, 1000);
			}
		}

		//给获取验证码绑定事件
		$("#getMsg").on("click",function (){
			$.post("/registration/sendMsgCode?phone="+$("#phone").val(),function (res){//请求获取验证码
				if (res.code==1){
					layer.msg(res.msg);
				}else{
					setTimeRun();// 成功后启动倒计时器
				}
			});
		});


		//给提交按钮绑定事件
		$("#registrationSubmitBtn").on("click",function (){
			$.post("/registration/reg?code="+$("#captcha").val()+"&&username="+$("#username").val()+
			"&&password="+$("#r_password").val()+"&&confirmPassword="+$("#confirmPassword").val()+"&&phone="+$("#phone").val(),function (res){
				if (res.code == 1) {
				    //失败了
					layer.msg(res.msg);
				}else{
					//成功了
					layer.confirm("注册成功，点击确定重新登录",function (){
						window.top.location.href="/login";
					});
				}

			});
		});


	});
</script>
</body>
</html>